/*-------------------   外部导入   -------------------------------------------------------------------*/
import type { ColumnsType } from 'antd/es/table';
import {
  useSearchParams,
  NavLink,
  useNavigate,
  useLocation
} from "react-router-dom";
import dayjs from 'dayjs';
import React from "react";
import { Card, Button, Row, Col, Input, Select, Table, DatePicker, message, Modal } from "antd";
import { useState, useEffect } from "react";
// 导入样式
import "../../../assets/style/admin.scss"
// 导入接口
import {
    getCarPayHistoryRecordRenew,  // 首页---获取业主车辆记录--续租
    getRenewalSubmission,   // 首页---获取业主车辆记录--续租--提交
    getCarPayHistoryRecordRenewParking, // 首页---登记户主----续租---选择车位

} from "../../../api/admin";
// 字体图标
import { PlusOutlined, SearchOutlined, RedoOutlined } from "@ant-design/icons";

/*-------------------   外部导入   -------------------------------------------------------------------*/


function carAddParkingSpace() {
    /*-------------------   定义数据   -------------------------------------------------------------------*/
    // 获取路由信息
     const location:any = useLocation().search;
     const ind: any = location.indexOf("=");
     const carId = location.slice(ind+1);
    // 定义车辆数据
    const [reneForm, setReneForm] = useState()
    const [messageApi, contextHolder] = message.useMessage();
    // 选择车位对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const { Search } = Input;
    // 车位渲染信息  组件
    const [list, setList] = useState({
        area: "",
        communityId: "",
        createTime: "",
        num: "",
        paId: "",
        parkingType: "",
        parkingTypeName: "",
        psId: "",
        remark: "",
        state: "",
        stateName: "",
    });
    // 表格数据
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '停车场ID',
            dataIndex: 'paId',
            key: 'paId'
        },
        {
            title: '停车位ID',
            dataIndex: 'psId',
            key: 'psId',
        },
        {
            title: '停车场编码',
            dataIndex: 'remark',
            key: 'remark',
        },
        {
            title: '停车位编码',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '车位类型',
            key: 'parkingTypeName',
            dataIndex: 'parkingTypeName',
        },
        {
            title: '车位状态',
            key: 'stateName',
            dataIndex: 'stateName',
        },
        {
            title: '面积',
            key: 'area',
            dataIndex: 'area',
        },
        {
            title: '操作',
            key: 'createTime',
            render: (_, record) => (
                <Button type="primary" onClick={() => { setlist(record) }} > 选择</Button >
            ),
        },
    ];
    // 获取到的车辆信息
    const [CarPaylist, setCarPayList] = useState()
  /*-------------------   定义数据   -------------------------------------------------------------------*/


  /*-------------------   定义方法   -------------------------------------------------------------------*/
    // 获取数据
    useEffect(()=>{
        var obj = {
            page: 1,
            row: 1,
            communityId: 2023032658120002,
            carId: carId,
        }
        getCarPayHistoryRecordRenew(obj)
        .then(res=>{
            console.log(res.data.data)
            setReneForm(res.data.data[0])
            
            console.log(res.data.data)
        })
    },[])
    // 返回上一页
    const goBack = () => {
        window.history.go(-1)
    }
    // 提交
    const submitTo = () => {
        getRenewalSubmission(reneForm)
            .then(res => {
                console.log(res.data)
                if (res.data.code == 404) {
                    message.warning(res.data.msg)
                }
            })
        console.log(reneForm)
    }
    // 选择停车位
    const parkingLot = () => {
        setIsModalOpen(true)
        getCarPayHistoryRecordRenewParking({
            page: 1,
            row: 10,
            communityId: 2023032658120002,
            num: "",
            areaNum: "",
            carNum: "",
            state: "F"
        }).then(res => {
            console.log(res.data.parkingSpaces)
            setCarPayList(res.data.parkingSpaces)
        })
    }
    // 修改list
    const setlist = (arr: any) => {
        console.log(arr)
        setList(arr)
        setIsModalOpen(false);
        // for (var i = 0; i <= arr.length; i++) {
        setReneForm({ ...reneForm, num: arr.num, psId: arr.psId, paId: arr.paId })
        // }
        console.log(reneForm)
    }
  /*-------------------   定义方法   -------------------------------------------------------------------*/


  return  <div>
{
    reneForm ? 
              <div className='carAddParkingSpace'>
                  <Modal title="请选择停车位!" width={800} cancelText="取消" okText="确定" open={isModalOpen}>
                      <div className="top">
                          <Search placeholder="请输入停车位编号" onSearch={(e) => { onSearch(e) }} enterButton />
                      </div>
                      <Table columns={columns} dataSource={CarPaylist} size="small" />;
                  </Modal>
                  <Card title="停车位信息" extra={<div><Button type="primary" icon={<SearchOutlined />} onClick={() => { parkingLot() }}>选中车位</Button>&emsp;<Button type="primary" onClick={() => { goBack() }}>返回</Button></div>}>
        <Row gutter={24}>
            <Col span={8}>
                <ul>
                    <li>
                        <p className='title'>车位ID：</p>
                        <p>{reneForm.psId}</p>
                    </li>
                    <li>
                        <p className='title'>车位状态：</p>
                        <p>{reneForm.stateName}</p>
                    </li>
                </ul>
            </Col>
            <Col span={8}>
                <ul>
                    <li>
                        <p className='title'>编号：</p>
                        <p>{reneForm.num}</p>
                    </li>
                    <li>
                        <p className='title'>面积：</p>
                        <p>平方米</p>
                    </li>
                </ul>
            </Col>
            <Col span={8}>
                <ul>
                    <li>
                        <p className='title'>停车场：</p>
                        <p>{reneForm.areaNum}</p>
                    </li>
                    <li>
                        <p className='title'>备注：</p>
                        <p>{reneForm.remark}</p>
                    </li>
                </ul>
            </Col>
        </Row>
        </Card>
        <Card style={{ marginTop: 16 }} title="车辆信息" >
            <ol>
                <li>
                    <span>车牌号</span>
                    <Input disabled={true} value={reneForm.carNum} style={{flex:"1",height: "34px",marginBottom:"10px"}}/>    
                </li>
                <li>
                    <span>起租时间</span>
                    <DatePicker
                    format="YYYY-MM-DD HH:mm:ss"
                    style={{flex:"1",height: "34px",marginBottom:"10px"}}
                    allowClear={false}
                    defaultValue= {dayjs(reneForm.startTime, 'YYYY-MM-DD HH:mm:ss')}
                                  placeholder="请选择开始时间"
                                  onChange={(e: any) => {
                                      setReneForm({ ...reneForm, startTime: `${e.$y}-${e.$M}-${e.$d} ${e.$H}:${e.$m}:${e.$s}` })
                                      console.log(e.$y)
                                      console.log(dayjs(e, 'YYYY-MM-DD HH:mm:ss'))
                                  }}
                    />
                </li>
                <li>
                <span>结租时间</span>
                    <DatePicker
                    format="YYYY-MM-DD HH:mm:ss"
                    style={{flex:"1",height: "34px",marginBottom:"10px"}}
                    allowClear={false}
                    defaultValue= {dayjs(reneForm.endTime, 'YYYY-MM-DD HH:mm:ss')}
                                  placeholder="请选择结束时间"
                                  onChange={(e: any) => {
                                      setReneForm({ ...reneForm, endTime: `${e.$y}-${e.$M}-${e.$d} ${e.$H}:${e.$m}:${e.$s}` })
                                      console.log(e.$y)
                                      console.log(dayjs(e, 'YYYY-MM-DD HH:mm:ss'))
                                  }}
                    />
                </li>
                <li>
                    <span>备注</span>
                    <Input.TextArea style={{flex:"1"}} value={reneForm.remark}/>
                </li>
            </ol>
                  </Card>
                  <div className='btn'>
                      <Button type="primary" onClick={() => { submitTo() }}>提交</Button>
                  </div>
    </div>
    :
              <div>

              </div>
}
    </div>
}

export default carAddParkingSpace;
